<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>
        <ui:composition template="../templates/default3.xhtml">  
            <ui:define name="content">
                <h:form >
                    <p:panel header="Create Employee Account" id="addEmployeePanel">
                        <font class="fieldNote">* - Mandatory Field<br/></font> 
                        <p:messages/>
                        <table class="panel">
                            <tr>
                                <td>User ID:</td>
                                <td> 
                                    <p:inputText label ="User ID " required="true" id="userId" requiredMessage="User ID Required" value="#{employeeManagerBean.userId}" validatorMessage="User ID Must Have a Minimum of 5 Digits"> 
                                        <f:validateLength minimum="5"/>
                                    </p:inputText> 
                                    <font class="fieldNote">* Min. 5</font> 

                                </td>
                            </tr>      
                            <tr>
                                <td>Employee Name:</td>
                                <td> 
                                    <p:inputText required="true" id="name" requiredMessage="Employee Name Required" value="#{employeeManagerBean.name}"> 

                                    </p:inputText>
                                    <font class="fieldNote">* </font> 

                                </td>
                            </tr>
                            <tr>
                                <td>D.O.B:</td>
                                <td> 
                                    <p:inputMask label ="D.O.B " required="true" id="dob" requiredMessage="Date of Birth Required" value="#{employeeManagerBean.dob}"  mask="99/99/9999" validatorMessage="Invalid D.O.B format "> 

                                    </p:inputMask>

                                    <font class="fieldNote">* </font>
                                    <font size ="1">(dd/mm/yyyy)</font>

                                </td>
                            </tr>
                            <tr>
                                <td>Department:</td>
                                <td>                                                                                
                                    <h:selectOneMenu id="department" value="#{employeeManagerBean.department}">
                                        <f:selectItem id="Wholesales" itemLabel="Sales - Wholesales" itemValue="Sales - Wholesales" />
                                        <f:selectItem id="Directsales" itemLabel="Sales - Direct sales" itemValue="Sales - Direct sales" />
                                        <f:selectItem id="Mktcampaign" itemLabel="Marketing - Marketing campaign" itemValue="Marketing - Marketing campaign" />
                                        <f:selectItem id="MktMM" itemLabel="Marketing - Mass media advertising" itemValue="Marketing - Mass media advertising" />
                                        <f:selectItem id="MktNM" itemLabel="Marketing - New and social media adverting" itemValue="Marketing - New and social media adverting" />
                                        <f:selectItem id="Prodsp" itemLabel="Production and Operation - sales planning" itemValue="Production and Operation - sales planning" />
                                        <f:selectItem id="Prodpp" itemLabel="Production and Operation - production planning" itemValue="Production and Operation - production planning" />
                                        <f:selectItem id="Proff" itemLabel="Production and Operation - factory floor" itemValue="Production and Operation - factory floor" />                                       
                                        <f:selectItem id="scw" itemLabel="Supply chain - Warehouse" itemValue="Supply chain - Warehouse" />
                                        <f:selectItem id="scship" itemLabel="Supply chain - Shipping" itemValue="Supply chain - Shipping" />
                                        <f:selectItem id="scpurch" itemLabel="Supply chain - Purchasing" itemValue="Supply chain - Purchasing" />
                                        <f:selectItem id="finar" itemLabel="Finance - Accounts receivable" itemValue="Fiance - Accounts receivable" />                                        
                                        <f:selectItem id="finap" itemLabel="Finance - Accounts payable" itemValue="Finance - Accounts payable" />                                       
                                        <f:selectItem id="finia" itemLabel="Finance - Internal audit" itemValue="Finance - Internal audit" />                                        
                                        <f:selectItem id="techtc" itemLabel="Technology - Technical support" itemValue="Technology - Technical support" />             
                                        <f:selectItem id="techad" itemLabel="Technology - Application Development" itemValue="Technology - Application Development" />
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td>Designation:</td>
                                <td> 
                                    <p:inputText  required="true" id="designation" requiredMessage="Designation Required" value="#{employeeManagerBean.designation}" > 

                                    </p:inputText>
                                    <font class="fieldNote">* </font> 

                                </td>
                            </tr>

                            <tr>
                                <td>Contact No. (Office):</td>
                                <td>
                                    <p:inputText label=" Contact No. (Office)" required="true" id="contactOffice" requiredMessage="Office Number Required" value="#{employeeManagerBean.contactOffice}" validatorMessage="Contact No. (Office) Must Have a Minimum of 8 Digits"> 
                                        <f:validateLength minimum="8"/>
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 8</font>

                                </td>
                            </tr>
                            <tr>
                                <td>Contact No. (Mobile):</td>
                                <td>
                                    <p:inputText label=" Contact No. (Mobile)" required="true" id="contactMobile" requiredMessage="Mobile Number Required" value="#{employeeManagerBean.contactMobile}" validatorMessage="Contact No. (Mobile) Must Have a Minimum of 8 Digits"> 
                                        <f:validateLength minimum="8"/>
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 8</font> 

                                </td>
                            </tr>
                            <tr>
                                <td>Email Address:</td>
                                <td>
                                    <p:inputText required="true" id="email" requiredMessage="Email Address Required" validatorMessage="Invaild Email Address Format" value="#{employeeManagerBean.emailAddress}"> 
                                        <f:validateRegex pattern="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$" />
                                    </p:inputText> 
                                    <font class="fieldNote">* </font>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="btn"><hr/>
                                    <p:commandButton id="btnAddEmployee" value="Create Account" actionListener="#{employeeManagerBean.addEmployee}" update="addEmployeePanel" ajax="true" />
                                </td>
                            </tr>
                        </table>
                        <br/>                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </p:panel>
                </h:form>
            </ui:define>        
        </ui:composition>
    </body>
</html>